<template>
  <el-dialog v-model="visible" :title="title" destroy-on-close @closed="onClosed">
    <el-carousel v-loading="loading" :autoplay="false" arrow="never" element-loading-background="#475669"
                 height="500px" indicator-position="none" ref="carouselRef">
      <el-carousel-item  v-for="(item,idx) in list" :muted="false" :autoplay="false" object-fit="cover">
        <template v-if="currentVideoIndex === idx">
          <video v-if="!isVideoError" ref="videoRef" controls loop>
            <source :src="item.watchUrl" type="video/mp4" @error="onError"/>
            您的浏览器不支持 video 标签。
          </video>
          <el-empty v-else description="视频加载失败,请稍后重试" image="">
            <template #image>
              <el-icon size="100">
                <Warning/>
              </el-icon>
            </template>
          </el-empty>
        </template>
      </el-carousel-item>
    </el-carousel>
    <div class="player-list-wrap">
      <div v-for="(item,idx) of list" :class="{active:currentVideoIndex  === idx}"  @click="onChangeVideo(idx)">
        {{ types[item.videoIndex] }}
      </div>
    </div>
  </el-dialog>
</template>
<script setup>
import {onMounted, ref} from "vue";
import EsAjax from "@/utils/EsAjax";
import Apis from "@/apis";
import {Warning} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";

const loading = ref(false)
const visible = ref(false)
const title = ref('')
const list = ref([])
const currentVideoIndex = ref(0)
const isVideoError = ref(false)
const carouselRef = ref()
const types = {
  0:'课件画面',
  1:'老师画面',
  2:'学生画面',
  100:'组合画面',
}

const onClosed = ()=>{
  list.value = []
}

const getList = (taskId) => {
  loading.value = true
  EsAjax.post(Apis.recordFileList, {taskId: taskId}).then((res) => {
    list.value = res.data.data.list
  }).finally(() => {
    loading.value = false
    console.log(loading)
  })
}
const onChangeVideo = (e) => {
  currentVideoIndex.value = e
  carouselRef.value.setActiveItem(e)
  isVideoError.value = false
}
const onError = (e) => {
  console.log(e)
  isVideoError.value = true
}

const show = (id, tit = '点播视频查看') => {
  if(id){
    visible.value = true
    title.value = tit
    getList(id)
  }else{
    ElMessage.error('暂无录播资源')
  }
}


onMounted(()=>{
  getList()
})


defineExpose({
  show
})
</script>
<style lang="less" scoped>
.el-carousel__item video {
  color: #475669;
  margin: 0;
  text-align: center;
  height: 100%;
  width: 100%;
}

.el-carousel__item:nth-child(2n) {
  background-color: #475669;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #475669;
}
.player-list-wrap{
  //background-color: #fff;
  display: flex;
  padding: 12px 0 ;
  >div{
    display: flex;
    padding: 4px 14px;
    background-color: #00A2CC;
    color:#fff;
    cursor: pointer;
    &.active{
      background-color: #00728d;
      display: flex;
      justify-content: center;
      align-items: center;
      &:before{
        content: "";
        display: inline-block;
        width: 8px;
        height: 8px;
        background-color: #00ff80;
        box-shadow: 0 0 9px #00ff80;
        margin-right: 8px;
        border-radius: 8px;
      }
    }
  }
  >div+div{
    margin-left: 14px;
  }
}
</style>
